<template>
  <div class="admin_page">
    <h2>欢迎，管理员！</h2>
    <button @click="goToLogin">返回登入页面</button>
    <table>
      <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>地址</th>
            <th>操作</th>
          </tr>
      </thead>
      <tbody>
          <tr v-for="(user,index) in users" :key="index">
              <td>{{ user.name }}</td>
              <td>{{ user.age }}</td>
              <td>{{ user.address }}</td>
              <td>
                <button @click="editUser(index)">编辑</button>
                <button @click="deliteUser(index)">删除</button>
              </td>
          </tr>
      </tbody>
    </table>
    <button @click="addUser">新增用户</button>
  </div>

</template>

<script>
import  { ref } from 'vue';
import  { ElNotification } from "element-plus";
import router from "../router/index.js";
import {useRouter} from "vue-router";


export default {
  setup(){
      const user = ref([
        { name: '张三', age: 24, address: '上海市'},
        { name: '李四', age: 27, address: '北京市'},
        { name: '王五', age: 29, address: '广州市'}
      ]);
      const goToLogin = () => {
        router.push('/');
      };
      const addUser = () => {
           const newUser = { name:'',age:'',address:''};
           ElNotification({
             title:'新增用户',
             message:'填写用户信息',
             type: 'info'
           });
      const editUser = (index) => {
          const user = user.value[index];
          ElNotification({
            title:'编辑用户',
            message:'请修改用户信息',
            type: 'info'
          });
      const deleteUser = (index) => {
          ElNotification({
            title:'删除用户',
            message:'确认删除',
            type: 'warning'
          });
      };
      return {
        user,
        goToLogin,
        addUser,
        editUser,
        deleteUser
      };
      }
      };
  }
};
</script>

<style scoped>
.admin_page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35vh;
  background: #000;
}

.box-card {
  width: 400px;
  padding: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.card_header{
  text-align: center;
}
</style>
